<template>
  <div style="padding-top: 20px;">
    <div class="row">
      <button class="btn btn-light" style="width: 50px; line-height: 25px; margin-left: 50px; background-color: white;" @click="home">
        <img src="../../static/img/house-fill.svg" alt="">
      </button>
    </div>
    <div class="row" style="height: calc(89vh); margin-left: 0; margin-right: 0;">

      <div class="col-lg-1 arrow-box">
        <img src="../../static/img/arrow-bar-left.svg" alt="" class="arrow" title="上一个" @click="previous()" v-if="hasPrevious">
      </div>

      <div class="col-lg-6" :class="isWidth ? 'width-img-box' : 'height-img-box'">
        <img :src="data.image.imageUrls ? data.image.imageUrls[data.image.current] : ''" alt="">
      </div>

      <div class="col-lg-4 edit-box">
        <div class="type">
          <div class="form-check">
            <input class="form-check-input" type="radio" name="flexRadioDisabled" id="PIC" v-bind:checked="!data.isDir" disabled>
            <label class="form-check-label" for="PIC">
              PIC
            </label>
          </div>
          <div class="form-check">
            <input class="form-check-input" type="radio" name="flexRadioDisabled" id="ALBUM" v-bind:checked="data.isDir" disabled>
            <label class="form-check-label" for="ALBUM">
              ALBUM
            </label>
          </div>
        </div>
            <div class="name-box">
                <input class="filename" type="text" v-model="data.filename.filename">
                <span class="extension">{{data.filename.extension}}</span>
            </div>
            <TagDisplay v-bind:selectedTags="data.tag.selectedTags" style="border: 1px solid gray;"></TagDisplay>
            <div v-on:mousewheel="load" id="image-list" v-if="data.isDir" class="row" style="margin-left: 0; margin-right: 0;">
              <div v-if="index < image.currentBorder" v-for="(imageUrl, index) in data.image.imageUrls" :class="[index == data.image.current ? 'current-image' : '', isWidth ? 'width-img-box' : 'height-img-box']" @click="selectImage(index)" class="col-lg-2 image-list-ele">
                <img :src="imageUrl">
              </div>
            </div>
            <button v-if="" :class="{'disabled': !data.needSavaChange}" class="btn btn-primary" style="display: block; margin: 10px auto 0 auto" @click="$emit('filing')">
              {{refreshUrl == 'filefiling' ? (data.filingTime > 0 ? '修改' : '整理') : '修改'}}
              </button>

            <div v-if="!data.needSavaChange" class="alert alert-success d-flex align-items-center" role="alert" style="margin-top: 10px; height: 40px;">
              <svg style="height: 15px; width: 30px;" class="bi flex-shrink-0 me-2" role="img" aria-label="Success:"><use xlink:href="#check-circle-fill"/></svg>
              <div>Success!</div>
            </div>
      </div>

      <div class="col-lg-1 arrow-box">
        <img src="../../static/img/arrow-bar-right.svg" alt="next" class="arrow" title="下一个" @click="next()" v-if="data.hasNext">
      </div>
    </div>
  </div>
</template>


<script>
  import TagDisplay from './tag/TagDisplay'
  export default {
    name: 'Filing',
    components: {
      TagDisplay,
    },
    props: ['queryParam', 'refreshUrl', 'data'],
    watch: {
      'data.tag.selectedTags': {
        handler: function (newVal, old) {
          this.watchChange();
        },
      },
      'data.filename.filename': {
        handler: function (newVal, old) {
          this.watchChange();
        },
      },
      '$route' (to, from) {
        this.firstChange = 0;
      }
    },
    methods: {
      /**
       * 跳转下一张，需要确保有下一张才能调用该方法
       * */
      next() {
        let index = this.queryParam.index + 1;
        let pageNum = this.queryParam.pageNum;
        if (this.refreshUrl == 'filefiling' && this.data.filingTime > 0) {
          // 已整理就不需要递增index
          this.$emit('initData');
          return;
        }
        if (index == this.queryParam.pageSize) {
          index = 0;
          pageNum += 1;
        }
        this.queryParam.pageNum = pageNum;
        this.queryParam.index = index;
        this.$emit('initData');
      },
      /**
       * 跳转上一张，需要确保不是第一页的第一个才能调用该方法
       * */
      previous() {
        let index = this.queryParam.index - 1;
        let pageNum = this.queryParam.pageNum;
        if (index < 0) {
          index = this.queryParam.pageSize - 1;
          pageNum -= 1;
        }
        this.queryParam.pageNum = pageNum;
        this.queryParam.index = index;
        this.$emit('initData');
      },
      selectImage(index) {
        this.data.image.current = index;
      },
      watchChange() {
        if (this.firstChange == 2) {
          this.data.needSavaChange = true;
          return;
        }
        this.firstChange += 1;
      },
      load() {
        let imageListEle = document.getElementById('image-list');
        if (Math.ceil(imageListEle.clientHeight) + Math.ceil(imageListEle.scrollTop) >= imageListEle.scrollHeight) {
          this.image.currentBorder += this.image.loadBatchSize;
        }
      },
      home() {
        this.$router.replace({
            name: this.queryParam.fromModule,
            params: this.queryParam
        })
      }
    },
    computed: {
      hasPrevious() {
        return this.queryParam.pageNum != 1 || this.queryParam.index != 0;
      },
      isWidth() {
        return this.data.image.dimension.width > this.data.image.dimension.height;
      }
    },
    data() {
      return {
        firstChange: 0,
        image: {
          loadBatchSize: 12,
          currentBorder: 18
        }
      }
    },
  }
</script>

<style scoped>
  .width-img-box {
    background-color: rgb(250, 250, 250);
    padding: 0;
    display: flex;
    align-items: center;
    overflow: hidden;
    height: 100%;
  }
  .width-img-box img {
    width: 100%;
  }
  .height-img-box {
    background-color: rgb(250, 250, 250);
    padding: 0;
    text-align: center;
    height: 100%;
  }
  .height-img-box img {
    height: 100%;
  }

  .edit-box {
      background-color: rgb(245, 245, 245);
      padding-top: 10px;
      padding-left: 10px;

  }
  .edit-box > * {
      margin-bottom: 15px;
  }

  .edit-box .name-box .filename {
      width: 80%;
  }

  #image-list {
    overflow-y: scroll;
    height: 230px;
  }
  .image-list-ele {
    height: 100px;
    margin-top: 5px;
    border: 2px solid white;
    overflow: hidden;
  }
  .current-image {
    border: 2px solid cadetblue;
  }

  .arrow-box {
    padding: 0;
    position: relative;
    user-select: none;
  }
  .arrow {
    cursor: pointer;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 45px;
    height: 45px;
  }
  .arrow:hover {
    opacity: 0.5;
  }

  .type .form-check {
    display: inline-block;
    margin-right: 15px;
  }
</style>
